<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>

    <div id="root"></div>

    <script type="text/babel">
        // case1
        // ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
        // case2
        // ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
        // case3
        // const root = ReactDOM.createRoot(document.getElementById('root'));
        // root.render(<h1>Hello, world!</h1>);
        // case4
        // const root = ReactDOM.createRoot(document.getElementById('root'));
        // const names = ['Alice', 'Bob', 'Charlie'];
        // 
        // class App extends React.Component {
        // render() {
        // return (
        // <div>
        // <h1>Hello, world!</h1>
        // <input type="search" name="search" id="search" />
        // <ul>
        // {
        // names.map(name => (
        // <li key={name}>{name}</li>
        // ))
        // }
        // </ul>
        // </div>
        // );
        // }
        // }
        // root.render(<App />);

        // case5

        // const root = ReactDOM.createRoot(document.getElementById('root'));
        // class App extends React.Component {
        //     constructor(props) {
        //         super(props);
        //         this.state = {
        //             names: ['Alice', 'Bob', 'Charlie'],
        //         };
        //     }
        //     render() {
        //         return (
        //             <div>
        //                 <h1>react demo</h1>
        //                 <input type="search" name="search" id="search" />
        //                 <ul>
        //                     {
        //                         this.state.names.map(name => (
        //                             <li key={name}>{name}</li>
        //                         ))
        //                     }
        //                 </ul>
        //             </div>
        //         )
        //     }
        // }
        // root.render(<App />);


        // case6
        // 生命周期 
        // constructor render componentDidMount componentWillUnmount componentDidUpdate componentWillUnmount render


        const root = ReactDOM.createRoot(document.getElementById('root'));
        class App extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    // items: ['Alice', 'Bob', 'Charlie', 'David'],
                    items: [],
                };
            }
            componentDidMount() {
                console.log('组件已挂载')
                // fetch('https://jsonplaceholder.typicode.com/users')
                fetch('https://pokeapi.co/api/v2/pokemon?limit=10')
                    .then(response => response.json())
                    .then(data => {
                        // this.setState({
                        //     names: data.map(item => item.name),
                        // });
                        // this.setState(
                        //     () => {
                        //         return { names: data.map(item => item.name) }
                        //     },
                        //     () => {
                        //         console.log(this.state.names);
                        //     }
                        // )
                        // this.state.names = data.map(item => item.name);// 无效, 无法触发更新
                        // this.forceUpdate();// 强制更新

                        console.log(data.results);//[{},{}]
                        this.setState({
                            items: data.results,
                        });
                        console.log(this.state.items);//[]
                    });
            }
            render() {
                return (
                    <div>
                        <h1>react demo</h1>
                        <input type="search" name="search" id="search" />
                        <ul>
                            {
                                this.state.items.map((item, index) => (
                                    <li key={item.url} >{item.name}</li>
                                ))
                            }
                        </ul>
                    </div >
                )
            }
        }
        root.render(<App />);



    </script>


</body>

</html>